<!--
 * @Author: wangming
 * @Date: 2020-09-07 16:57:20
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-17 10:51:52
 * @Description:  设计器内部表单内专用
-->
<template>
  <el-form-item
    :prop="config.modelName || config.key"
    :error="config.__highSetUp.formChecked ? '基础信息未配置完善' : ''"
    :label-width="
      config.__config.noItem ? '' : config.__config.labelWidth + 'px'
    "
    :rules="rules"
  >
    <template slot="label" v-if="!config.__config.noItem">
      <span :style="vmFormState.cssStyle" :class="vmFormState.labelStyle">
        {{ config.__config.label + (vmFormState.labelSuffix || "") }}</span
      >
      <el-tooltip v-if="config.__config.showExplain" placement="top">
        <div
          slot="content"
          class="explain-content"
          :style="{
            'white-space': 'pre-line',
          }"
        >
          {{ config.__config.explainValue }}
        </div>
        <i class="el-icon-info"></i>
      </el-tooltip>
    </template>
    <component
      :disabled="config.__config.disabled"
      isEdit
      :is="config.tagName"
      :form="form"
      :config="config"
      v-model="form[config.modelName]"
    ></component>
  </el-form-item>
</template>
<script>
import myformComponents from "@/pageComponents/components/__form/index.js";
export default {
  components: { ...myformComponents },
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  inject: ["formState"],
  computed: {
    vmFormState() {
      return this.formState();
    },
    rules() {
      const rules = [];
      if (this.config.__config.required) {
        rules.push({
          required: this.config.__config.required,
          message: this.config.__config.label + "不能为空",
          trigger: "blur",
        });
      }
      return rules;
    },
  },
  async created() {
    this.$set(this.config, "isFormLayout", true);
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 12px;
}
::v-deep .el-input {
  height: 32px;
  overflow: hidden;
}
::v-deep .el-icon-info {
  margin-left: 10px;
}
.explain-content {
  max-width: 400px;
}
</style>
